<template>
  <div class="container">
    <el-form :inline="true">
      <el-form-item label="组织名">
        <el-input v-model="searchForm.orgName" placeholder="组织名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" >搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <tags-table :tableData='tableData' @update="search"></tags-table>
    <el-pagination
      style="padding: 10px 10px 5px 10px;"
      :current-page="pageData.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageData.size"
      layout="total, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script>
  import TagsTable from '../components/OrgsTable'
  import Pagination from '@/components/Pagination'
  import TagsPickDialog from '../components/OrgsPickDialog'
  export default {
    name: 'Orgs',
    components: {
      TagsTable,
      Pagination,
    },
    data: function() {
      return {
        searchForm: {
          orgName:'',
        },
        pageData: {
          current: 1,
          size: 10,
        },
        tableData: [],
        total: 0,


      }
    },
    mounted() {
    },
    created: function() {
      // console.log(this.$api)
      this.search();
    },
    methods: {
      search() {
        let formData = {}
        if(this.searchForm.orgName) formData['orgName'] = this.searchForm.orgName;
        formData['current'] = this.pageData.current;
        formData['size'] = this.pageData.size;
        this.$api.orgsPage(formData)
          .then(res => {
            this.tableData = res.records;
            this.pageData.current = res.current;
            this.pageData.size = res.size;
            this.total = res.total;
          });
      },
      reset() {
        Object.assign(this.$data.searchForm, this.$options.data().searchForm)
      },
      showDialog() {
        this.dialogTableVisible = !this.dialogTableVisible;
      },

      handleSizeChange(val) {
        this.pageData.size = val;
        this.search();
      },

      handleCurrentChange(val) {
        this.pageData.current = val;
        this.search();
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 10px;
    width: 100%;
    height: 100%;
  }
</style>
